<template>
    <div class="content_base">
        <div class="upTo">
            <h2 class='title'>{{year}}年{{mouth}}月份进度月报信息</h2>
            <el-form :model="detialMes" label-position = 'right' class="clearfix">
              <el-form-item label="圩堤名称：">
                <div >{{detialMes.dikeName}}</div>
              </el-form-item>
              <el-form-item label="所在设区市：">
                <div >{{detialMes.city}} </div>
              </el-form-item>
              <el-form-item label="属地：">
                <div >{{detialMes.county}} </div>
              </el-form-item>  
              <el-form-item label="初设批复治理长度（km）：">
                  <div>{{detialMes.initPermissibleLength}} </div>
              </el-form-item>
              <el-form-item label="初设批复投资（万元）：">
                  <div>{{detialMes.initPermissibleInvest}}</div>
              </el-form-item>
              <el-form-item label="主体工程投资（万元）：">
                  <div>{{detialMes.mainProjectInvest}}</div>
              </el-form-item>
              <!-- <el-form-item label="需下达省级以上补助资金（万元）：">
                  <div class="detialdata">{{detialMes.requireCapital}}</div>
              </el-form-item> -->
              <el-form-item label="累计下达投资计划-中央资金（万元）：">
                <div>{{detialMes.investPlanCapital}}</div>
              </el-form-item>
              <el-form-item label="累计下达投资计划-省补资金（万元）：">
                <div>{{detialMes.investPlanProvince}}</div>
              </el-form-item>
              <el-form-item label="累计下达投资计划-地方资金（万元）：">
                <div>{{detialMes.investPlanLocal}}</div>
              </el-form-item>
              <!-- <el-form-item label="累计下达投资计划-合计（万元）：">
                <el-input class="detialdata">{{upTo.investPlanSum}}</el-input>
              </el-form-item> -->
              <el-form-item label="累计完成投资-中央资金（万元）：">
               <div >{{detialMes.investCapital}}</div> 
              </el-form-item>
              <el-form-item label="累计完成资金-省补资金（万元）：">
               <div>{{detialMes.investProvince}} </div>
              </el-form-item>
              <el-form-item label="累计完成资金-地方资金（万元）：">
                 <div>{{detialMes.investLocal}}</div>
              </el-form-item>
              <el-form-item label="累计完成资金-合计（万元）：">
                <div>{{detialMes.sumInvest}}</div> 
              </el-form-item>
              <el-form-item label="累计完成投资占批复总投资百分比（%）："  class="addMinWid">
                 <div>{{detialMes.completePercent}}</div>
              </el-form-item>
              <el-form-item label="完成主体工程投资（万元）：">
                 <div>{{detialMes.cumulativeMainInvest}}</div>
              </el-form-item>
              <el-form-item label="完成占批复主体工程投资百分比（%）：" class="addMinWid">
                 <div>{{detialMes.mainPercent}}</div>
              </el-form-item>
              <el-form-item label="累计完成治理长度（km）：">
                 <div>{{detialMes.cumulativeLength}}</div>
              </el-form-item>
               <el-form-item label="累计完成主要工程量-堤身（基）防渗（m²）：" class="addMinWid">
                <div>{{detialMes.quantitiesBody}}</div>
              </el-form-item>
               <el-form-item label="累计完成主要工程量-土方（m³）：">
                 <div>{{detialMes.quantitiesEarthwork}}</div>
              </el-form-item>
               <el-form-item label="累计完成主要工程量-砼（m³）：">
                 <div>{{detialMes.quantitiesConcrete}}</div>
              </el-form-item>
              <el-form-item label="累计完成主要工程量-石方（m³）：">
                 <div>{{detialMes.quantitiesStone}}</div>
              </el-form-item>
              <el-form-item label="累计完成主要工程量-钢筋制安(t)：">
                 <div>{{detialMes.quantitiesReinforced}}</div>
              </el-form-item>
              <el-form-item label="累计完成主要工程量-建筑物（座）：">
                 <div>{{detialMes.buildings}}</div>
              </el-form-item>
              <el-form-item label="开工时间：">
                 <div>{{detialMes.start}}</div>
              </el-form-item>
              <el-form-item label="完工时间：">
                <div> {{detialMes.end}}</div>
              </el-form-item>
              <el-form-item label="工程验收完成情况：">
                 <div>{{detialMes.projectAcceptance}}</div>
              </el-form-item>
              <el-form-item label="存在问题：">
                  <div>{{detialMes.existProblem}}</div>
              </el-form-item>
              <el-form-item label="备注：">
                  <div>{{detialMes.note}}</div>
              </el-form-item>
              <el-form-item label="上报人：">
                  <div>{{detialMes.reportPeople}}</div>
              </el-form-item>
              <el-form-item label="市级审批人：">
                  <div>{{detialMes.cityApprover}}</div>
              </el-form-item>
              <el-form-item label="市评语：" class="textarea">
                  <el-input type="textarea"
                     v-model="detialMes.cityContent"
                     class="content"
                     disabled
                    :autosize="{ minRows: 4,maxRows:4}"></el-input>
              </el-form-item>
              <el-form-item label="省级审批人：">
                  <div>{{detialMes.provinceApprover}}</div>
              </el-form-item>
              <el-form-item label="省评语：" class="textarea">
                  <!-- <div>{{detialMes.provinceContent}}</div> -->
                  <el-input type="textarea"
                     v-model="detialMes.provinceContent"
                     class="content"
                     disabled
                    :autosize="{ minRows: 4,maxRows:4}"></el-input>
              </el-form-item>
            </el-form>
            <!-- 是否可以审批   涉及等级和当前前等级用户是否进行了审批-->
            <!-- v-if需变为VshengP---------------------- -->
             <div slot="footer" class="dialog-footer clearfix" v-if="VshengP">
                   <h3>审批</h3>
                   <el-form class="clearfix" label-width='150px' :rules="rules" ref="isAdopt" :model="isAdopt">
                       <el-form-item label="审批人：" prop="approver">
                            <el-input v-model="isAdopt.approver"></el-input>
                       </el-form-item> 
                   <el-form-item label="审批内容：">
                      <el-input type="textarea"
                        v-model="isAdopt.content"
                        class="content"
                        placeholder="驳回或者通过的理由，可为空"
                       :autosize="{ minRows: 5,maxRows:5}"></el-input>   
                   </el-form-item>
                  </el-form>  
                  <div class="btn">
                       <el-button @click="isAdoptM('isAdopt','0')">驳回</el-button>
                       <el-button type="primary" @click="isAdoptM('isAdopt','1')">通过</el-button>
                  </div>  
            </div>
             <!-- <div slot="footer" class="dialog-footer" v-if="!VshengP">           
               
            </div> -->
        </div>
    </div>
</template>
<script>
import Bus from '../../Bus.js'
export default {
    
    data(){
        return{
        //本条数据的特征参数
          localData:{
               dikeCode:null,
               reportDate:null,
           },
        //数据信息------上报的数据
         detialMes:{
             dikeName:'', 
             city:'', 
             county:'',
             buildings: '',
             completePercent: '',
             cumulativeLength: '',
             cumulativeMainInvest:'',
             dikeCode: '',
             end:'',
             existProblem: '',
             initPermissibleInvest:'',
             initPermissibleLength:'',
            //  governDiskLength:'',
             investCapital:'',
             investLocal: '',
             investPlanCapital: '',
             investPlanLocal:'',
             investPlanProvince: '',
             investProvince: '',
             mainPercent: '',
             mainProjectInvest:'',
             note:'',
             operand:'',
             projectAcceptance: '',
             quantitiesBody: '',
             quantitiesConcrete: '',
             quantitiesEarthwork: '',
             quantitiesReinforced:'',
             quantitiesStone: '',
             requireCapital: '',
             start: '',
             sumInvest: '',
             state:'',//上报的状态
             reportPeople:''
            //  investPlanSum:''
         },
         proCode:'',
         //驳回或者通过
         isAdopt:{
             code:'',
             content:'',
             approver:'',
         },
         rules:{
             approver:[
                 { required: true, trigger: 'blur',message:'必填项，请填写审批人姓名' }
             ]
         },
         //用户信息
         leval:'',
         //时间的控制和用户等级是否可见
         VshengP:false,
         reportDate:'',
         mouth:'',
         year:''
        }
    },
    methods:{
        //驳回还是通过----省级驳回和市级驳回0--驳回1--通过
        isAdoptM(isAdopt,code){
          var _this = this 
          this.$refs[isAdopt].validate((valid) => {
            if (valid) {
              isAdopt = this[isAdopt]
             isAdopt.code = code
             var thisUrl = this.leval==2?`/cityreview/reviewprocessinfo/${this.proCode}`:`/provincereview/reviewprocessinfo/${this.proCode}`
             this.$axios.post(thisUrl,this.isAdopt).then(function(res){
                 var data =  res.data.responseMessage
              if(data=='审批成功'){
                  var mes = code=='0'?'驳回成功':'审批已通过'
                 _this.$message({
                    message: mes,
                    type: 'success'
                  });
                   Bus.$emit('changestate')
                  _this.$router.push({name:'zijing'})
                  Bus.$emit('changestate')
                }else{
                    _this.$message({
                    message: data,
                  });
                }
             }).catch(function(err){
                 console.log(err)
             })
            } else {
              return false;
            }
         })
        },
        //获得基本的三条数据，并将它push进总的数据中
        getBaseData(detialMes){
            var _this = this ;
            var thisDate = (new Date()).getTime()
            this.$axios.get(`/dikeInfo/getdikeinfobycode/${this.localData.dikeCode}`,{params:{
               thisDate:thisDate
             }}).then(function(res){
                  var data  = res.data.responseData
                  detialMes.dikeName =data.dikeName
                  detialMes.city =data.city
                  detialMes.county =data.county
                 
            })
        },
        //县级用户获取此条圩堤的信息
       getData(){
           var _this = this;
           var thisDate = (new Date()).getTime()
            this.$axios.get(`/projectprocess/getprocessinfo/${this.localData.dikeCode}`,{params:{
                reportDate:this.localData.reportDate,
                thisDate:thisDate
            }}).then(function(res){
            var codeMes = res.data.responseCode
            if(codeMes=='101'){
                    _this.$router.push({name:'login'})
              }else{
            var data =res.data.responseData
               if(data){
                 //    _this.detialMes = data
                _this.proCode = data.projectProcessCode
                for(var item in data){
                        _this.detialMes[item] = data[item]
                  }
               }
               _this.getBaseData(_this.detialMes)
               _this.hasShengP(_this.leval,_this.detialMes.state,_this.detialMes.rejected)
                 }   
             }).catch(function(err){
                 console.log(err)
          })
       },
        
  },
    mounted(){
        var _this = this
        this.localData.dikeCode = this.$route.params.dikeCode;
        this.localData.reportDate = this.$route.params.reportDate;
        this.mouth = this.$route.params.reportDate.substr(4,2)
        this.year = this.$route.params.reportDate.substr(0,4)
        //判断是否可以审批
        // this.$axios.get('/utilcontroller /getData').then(function(res){
        //       var data = res.data.responseData
        //       var data1 = data.substr(0,6)
        //       data1 = parseInt(data1)
        //       var today = data.substr(6,2)//是否八号前
        //       today = parseInt(today)
        //       if(data1==parseInt(_this.localData.reportDate||_this.leval!=1)){
        //             _this.VshengP = today<=8?true:false
        //       }else{
        //           _this.VshengP = false
        //       }
        // })
        
            this.getData()

        //获取表格数据数据并进行
     
    },
  created(){
      var storage =window.localStorage;
      this.leval =storage.getItem('level')

     
  },
}
</script>

<style scoped>
 .clearfix:after{
        content: '';
        height: 0;
        clear: both;
        display: block;
   }
   .title{
       height: 100px;
       line-height: 100px;
   }
   .upTo{
       width: 90%;
       margin: 0 auto;
   }
   .upTo .el-form-item{
       width: 40%;
       float: left;
       margin-left:5% 
   }
   .el-input,.el-textarea{
       width: 52%;
       float: right;
   }
   .addMinWid{
       min-width: 450px;
   }
   .dialog-footer{
       margin-top:100px;
       /* line-height: 300px; */
       /* background: #f0ffff; */
       border-top:1px solid #eee;
   }
  
  .dialog-footer .content{
      float: left;
      width: 500px;
      margin-left:200px
  }
  .dialog-footer[data-v-314dc778]{
      line-height: 100px;
  }
  h3{
      text-align: left;
      margin-left: 70px;
  }
   .el-form-item__content .el-textarea{
       width: 40%;
       margin-left: 10%
   }
   .el-form-item__content .content[data-v-5e19321e][data-v-5e19321e]{
       width: 55%;
   }
   .el-form-item__content div[data-v-314dc778]{
       /* width:110px; */
       float: left;
       text-align: center;
   }
    .dialog-footer .el-form{
       width: 600px;
       float: left;
       margin-left: 10%
   }
   .dialog-footer .el-form-item{
       /* display: block */
       float: none;
       width: 90%;
       float: left;
   }
   .dialog-footer .el-input,.dialog-footer .content{
        margin-left: 10px;
        width: 300px;
        float: left;
   }
  .dialog-footer .btn{
        width: 200px;
        float: left;
        /* margin-top: 100px */
  }
  .el-form-item__content div{
       float: left;
       text-align: left;
       margin-left:3%;      
   }
.flor1 .el-form-item__content div{
  margin-left:20px;
}
.flor2 .el-form-item__content div{ 
  margin-left:15px; 
}
</style>
